<template>
  <div>
    <!-- 气象预警 -->
    <el-tabs
      v-if="activeIndex === 0"
      v-model="activeName"
      @tab-click="getPdf(activeName)"
    >
      <el-tab-pane
        v-for="(item, index) in classMappings"
        :key="index"
        :label="item.name"
        :name="`${83 + index * 10}`"
      >
      </el-tab-pane>
    </el-tabs>
    <div class="select">
      <!-- 开始日期 -->
      <el-date-picker
        v-if="activeIndex === 0"
        v-model="beginTime"
        type="datetime"
        placeholder="请选择开始日期"
      >
      </el-date-picker>

      <!-- 结束日期 -->
      <el-date-picker
        v-if="activeIndex === 0"
        v-model="endTime"
        type="datetime"
        placeholder="请选择结束日期"
        style="margin: 0 20px"
      >
      </el-date-picker>
      <button
        @click="getPdf(isActive, beginTime, endTime)"
        v-if="activeIndex === 0"
      >
        查询
      </button>
    </div>
    <div class="content" v-if="activeIndex === 0">
      <div class="data">
        <el-table
          height="100%"
          :data="tableData"
          style="width: 100%; margin-bottom: 20px; text-align: center"
          stripe
          :header-cell-style="headerCellStyle"
          :cell-style="cellStyle"
          :row-style="rowStyle"
        >
          <el-table-column prop="id" label="期数" width="200">
          </el-table-column>
          <el-table-column prop="fileName" label="文件名"> </el-table-column>
          <el-table-column prop="classification" label="种类" width="200">
          </el-table-column>
          <el-table-column prop="countySign" label="发布单位" width="200">
          </el-table-column>
          <el-table-column prop="date" label="日期"> </el-table-column>
          <el-table-column prop="content" label="查看更多"
            ><template slot-scope="scope">
              <el-button @click="getUrl(scope.row.fileName)"
                >点击获取详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      activeIndex: 0,
      activeName: "83",
      tableData: [],
      classMappings: [
        { name: "灾害性短临天气预报", id: 83 },
        { name: "地质灾害气象风险预警", id: 93 },
        { name: "山洪灾害气象风险预警", id: 103 },
      ],
      beginTime: "",
      endTime: "",
    };
  },
  methods: {
    headerCellStyle() {
      return {
        background: "#011A10",
        color: "#fff",
        opacity: 0.8,
      };
    },
    cellStyle() {
      return {
        background: "#00371D",
        color: "#fff",
      };
    },
    rowStyle() {
      return {
        height: "30px",
      };
    },

    getPdf(classification, beginTime, endTime) {
      axios
        .get("https://816i9307t1.vicp.fun/yaqxfw/pdf/getPdf", {
          params: {
            classification: classification,
            beginTime: beginTime,
            endTime: endTime,
          },
        })
        .then((res) => {
          let short = res.data.data;
          short.forEach((item) => {
            const mapping = this.classMappings.find(
              (mapping) => mapping.id === item.classification
            );
            if (mapping) {
              item.classification = mapping.name;
            }
          });
          //console.log(short);
          this.tableData = short;
        })
        .catch((error) => {
          console.error("请求失败:", error);
        });
    },
    getUrl(fileName) {
      axios
        .get("https://816i9307t1.vicp.fun/yaqxfw/pdf/getUrl", {
          params: {
            fileName: fileName,
          },
        })
        .then((res) => {
          //console.log(res.data.data);
          window.open(res.data.data);
        })
        .catch((error) => {
          console.error("请求失败:", error);
        });
    },
  },
  mounted() {
    this.getPdf(83);
  },
};
</script>
<style lang="scss" scoped>
  .right {
    width: 75%;
    height: 95%;

    /*表格 */

    .select {
      width: 100%;
      height: 5%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin: 20px 0;
      button {
        width: 100px;
        height: 40px;
        background: none;
        border: #47c364 1px solid;
        border-radius: 5px;
        color: #fff;
      }
    }

    .content {
      width: 100%;
      height: 88%;
      display: flex;
      flex-wrap: wrap;

      .data {
        width: 100%;
        height: 69vh;
      }
    }
  }
</style>